<template>
  <div class="capital">
  
    <div v-if="!noLogin">
    <van-tabs v-model="active">
      <van-tab :title="$t('common.zongzichan')">
        <Assets :message="totalAssetsFront"></Assets>
      </van-tab>
      <van-tab :title="$t('common.zijinzhanghu')">
        <Capital :message="capitalAccountFront"></Capital>
      </van-tab>
      <van-tab :title="$t('common.heyuezhanghu')">
        <Contract
          :message="contractAccountFront"
          :currentPositionList="currentPositionList"
        />
      </van-tab>
    </van-tabs>
    <van-dialog v-model="show" class="dialog">
      <img src="../assets/images/zclogo.png" class="img" />
      <p>{{ $t("common.lie") }}</p>
      <div class="button">
        <button class="btn1" @click="gocapital">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="gorecharge">
          {{ $t("common.chongzhi") }}
        </button>
      </div>
    </van-dialog>
  </div>
  <div v-else>
        <van-button
        style="width:80vw;margin-top:30vh;"
          @click="showRegModel"
          class="maybtn"
          color="#0A7AFF"
          >点击登录</van-button
        >
      </div>

  <ModelReg ref="modelReg" :isCapital='1'/>

  </div>
</template>

<script>
import Assets from "../components/assets.vue";
import Capital from "../components/Capital.vue";
import Contract from "../components/contract.vue";
import { mapGetters } from "vuex";
import { createSocket } from "../common/_websocket";
import ModelReg from '../components/Model_Reg.vue'
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  components: {
    Assets,
    Capital,
    Contract,
    ModelReg
  },
  data() {
    return {
      noLogin:false,
      showindex: 1,
      currentPositionList: [],
      oldWalletParams: ["totalAssets", ""],
      newWebSocket: createSocket(),
      newWebSocket2: createSocket(),

      userInfo: {},
      active: 0,
      show: false,
      number: false,
      totalAssetsFront: {},
      capitalAccountFront: {},
      contractAccountFront: {},
    };
  },
  destroyed() {
    this.newWebSocket.close();
    this.newWebSocket2.close();
  },
  deactivated() {
    this.newWebSocket.close();
    this.newWebSocket2.close();
  },
  activated() {
    this.showindex = 1;
    this.userInfo = this.getUserInfo || {};

    if (this.userInfo.access_token && !this.userInfo.email) {
        this.noLogin = true
    }else{
      this.noLogin = false
    }
    this.active = localStorage.getItem("zh") - 0;
    localStorage.setItem("zh", 0);
    this.socketWalletConnect();
    this.socketConnect();
  },
  created() {},
  methods: {
    showRegModel(){
      this.$refs.modelReg.isShow = true
    },
    socketConnect() {
      this.newWebSocket2.init({
        url: `/contract/ws/info`,
        onopen: (msg, data) => {
          this.newWebSocket2.websocket.send(
            JSON.stringify({
              type: "subscribe",
              params: ["currentPosition", "", ""],
            })
          );
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "currentPosition") {
            this.currentPositionList = zdata.data.map(v=>{
              v.shuxiannum1 = this.handleShuXian(v)
              v.shuxiannum2 = 5-v.shuxiannum1
              return v
            }) || [];
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    handleShuXian(item){
      let num1 = +item.positionProfitRate
      let num2 = +item.multiple
      let num3 = +Math.ceil((num1 / num2) / 20)
      if(num3<0){
        num3 = 1
      }else if(num3 > 5){
        num3 =5
      }
      return num3 || 1
    },
    socketWalletConnect() {
      this.newWebSocket.init({
        url: `/wallet/ws/info`,
        onopen: (msg, data) => {
          this.newWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe",
              params: ["mergeWallet", ""],
            })
          );
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "mergeWallet") {
            this.totalAssetsFront = zdata.data.totalAssets || {};
            this.capitalAccountFront = zdata.data.capitalAccount || {};
            this.contractAccountFront = zdata.data.contractAccount || {};
            if (this.showindex == 1) {
              if (
                this.totalAssetsFront &&
                this.totalAssetsFront.totalAssets == 0
              ) {
                this.show = true;
                this.showindex = 2;
              }
            }
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    gorecharge() {
      this.$router.push("/recharge");
    },
    gocapital() {
      this.show = false;
    },
  },
};
</script>

<style scoped lang="scss">
.capital {
  ::v-deep .van-tab {
    color: rgba(135, 139, 151, 100);
    font-size: 3.73vw;
    font-family: PingFangSC-medium;
    margin-right: 4.3vw;
    flex: none;
  }
  ::v-deep .van-tabs__nav {
    background-color: #090A1B;
    .van-tab:nth-child(1) {
      justify-content: center;
      margin-left: -2vw;
    }
  }
  ::v-deep .van-tab--active {
    color: rgba(255, 255, 255, 100);
  }
  ::v-deep .van-tabs__line {
    background-color: rgba(10, 122, 255, 100);
    width: 5.3vw;
    height: 0.53vw;
    border-radius: 0.53vw;
    top: 9.5vw;
    right: 2vw;
  }
  ::v-deep .van-tabs__nav--line {
    padding-bottom: 0;
  }
  ::v-deep .van-tabs--line .van-tabs__wrap {
    width: 68.66vw;
    overflow: visible;
    margin-left: 4.4vw;
  }
  ::v-deep .van-overlay {
    background-color: rgba(0,0,0,.4);
  }
  .dialog {
    // width: 75.2vw;
    height: 77.33vw;
    border-radius: 2.66vw;
    background-color: rgba(45, 47, 59, 100);
    ::v-deep .van-dialog__footer {
      display: none;
    }
    .img {
      width: 31.73vw;
      height: 32.53vw;
      position: relative;
      top: 4.26vw;
    }
    p {
      width: 64vw;
      height: 10.4vw;
      line-height: 4.5vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      margin: 0 auto;
      top: 9vw;
      letter-spacing: 0.2vw;
    }
    .button {
      position: relative;
      top: 16.53vw;
      width: 64vw;
      display: flex;
      margin: 0 auto;
      .btn1 {
        width: 25.6vw;
        height: 10.93vw;
        line-height: 5.33vw;
        border-radius: 1.33vw;
        background-color: #171A2B;
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: center;
        //font-family: Arial;
        border: 1px solid rgba(10, 122, 255, 100);
        margin-right: 6.4vw;
      }
      .btn2 {
        width: 25.6vw;
        height: 10.93vw;
        line-height: 5.33vw;
        border-radius: 1.33vw;
        background-color: rgba(10, 122, 255, 100);
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: center;
        //font-family: Arial;
        border-width: 0;
        border: 1px solid rgba(10, 122, 255, 100);
      }
    }
  }
}
</style>
